<template>
  <div>
    <div class="header_box">
      <van-nav-bar :title="defName" left-arrow @click-left="$router.back()"/>
      <!--       :left-options="{ backText: '', preventGoBack: true }"-->
      <!--      <x-header class="header">{{ defName }}</x-header>-->
    </div>
    <div class="content_box">
      <div class="formBox bzb_style gzbank-style">
        <div v-if="form.type=='INNER'">
          <ab-custom-form></ab-custom-form>
        </div>
        <div v-if="form.type=='FRAME'">
          <ab-url-form ref="urlForm" :form="form"></ab-url-form>
        </div>
      </div>
    </div>
    <bpm-buttons v-if="buttons.length>0" :buttons="buttons" class="bzb_style gzbank-style"></bpm-buttons>
    <div v-if="dynamicComponent.show" :is="dynamicComponent.key" @cancel="dynamicComponent.show=false" @callback="dynamicComponent.callback" :name="dynamicComponent.name" :show-dialog="dynamicComponent.show" :passConf="dynamicComponent.flowParam"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import bpmService from '@/service/bpm/bpmService'
import formService from '@/service/form/formService'

export default {
  name: 'abCheckbox',
  methods: {},
  data: function () {
    return {
      defName: "",
      instance: "",
      form: "",
      buttons: "",
      flowRequestParam: {}, // 最终提交的数据
      configSpecified: {},	// 流程配置信息
      dynamicComponent: {
        key: "opinion-dialog",
        show: false
      },
      productInf: '',
      productNum: ''
    }
  },
  created: function () {
    this.defId = this.$route.query.defId;
    this.defKey = this.$route.query.defKey;
    this.instanceId = this.$route.query.instanceId || "";
    let productInf = this.$route.query.productInf || ""
    let productNum = this.$route.query.productNum || ""
    this.productInf = productInf
    this.productNum = productNum
    var thisVue = this;
    // bpmService.init({flowKey: this.defKey, defId: this.defId, instanceId: this.instanceId, formType: "mobile"}, function (data) {
    bpmService.init({flowKey: 'REG_COLLECTION', formType: "mobile"}, function (data) {
      if(thisVue.$route.query) {
        for(var i in data.data) {
          data.data[i].URL_PARAM_ = JSON.stringify(thisVue.$route.query);
        }
      }
      formService.initCustFormFu(data.form.formHtml, data);
      thisVue.form = {...data.form, startData: {productInf, productNum}};
      thisVue.defName = data.defName;
      thisVue.buttons = data.buttonList;
      thisVue.instance = data.instance;
      thisVue.flowRequestParam = data.flowRequestParam;
      thisVue.configSpecified = data.configSpecified;
    });
  }

}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar {
  .van-nav-bar__content {
    height: 4.4rem;
    line-height: 2rem;

    .van-icon {
      color: rgb(50, 50, 51);
      font-size: 2rem;
    }

    .van-nav-bar__title {
      font-size: 1.8rem;
    }
  }
}

.header_box {
  position: fixed;
  width: 100%;
  //height: 46px;
  top: 0;
  z-index: 10;

  //.header {
  //  background: #FFFFFF;
  //}
}

.content_box {
  z-index: 1;
  //margin: 5.8rem 1.2rem 7rem 1.2rem;
  margin: 5.8rem 0rem 7rem 0rem;
}
</style>
